<template>
	<view class="main">
		<view class="author-info">
			<text class="author-name">{{ this.detailUser.username }}</text>
		</view>
		<ImageSwiper :imageUrls="this.imageUrls" />
		<view class="title">{{content.title}}</view>
		<view class="text">{{this.content.body}}</view>
	</view>
	<view class="bottom-panel">
		<view class="bottom-item" @click="like">
			<image v-if="this.liked" class="bottom-item__icon" src="~@/static/icon/like_primary.svg" mode="aspectFill">
			</image>
			<image v-else class="bottom-item__icon" src="~@/static/icon/like.svg" mode="aspectFill"></image>
			<text class="bottom-item__text">{{likeCount}}</text>
		</view>
		<view class="bottom-item" @click="favorate">
			<image v-if="this.favorited" class="bottom-item__icon" src="~@/static/icon/favorite_primary.svg"
				mode="aspectFill"></image>
			<image v-else class="bottom-item__icon" src="~@/static/icon/favorite.svg" mode="aspectFill"></image>
			<text class="bottom-item__text">{{favoriteCount}}</text>
		</view>
	</view>
</template>

<script>
	import Mock from 'mockjs'
	import {myRequest} from '~@/util/api.js'
	import ImageSwiper from '~@/components/image-swiper.vue'
	export default {
		data() {
			return {
				liked: false,
				favorited: false,
				imageUrls: [
					`/static/picture/pic (${Math.floor(Math.random()*16+1)}).jpg`,
					`/static/picture/pic (${Math.floor(Math.random()*16+1)}).jpg`,
					`/static/picture/pic (${Math.floor(Math.random()*16+1)}).jpg`
				],
				contentsId: null,
				content: {
					title: '',
					body: ''
				},
				detailUser: {
					username: ''
				},
				likeCount: 100,
				favoriteCount: 100
			}
		},
		components: {
			ImageSwiper,
		},
		onLoad(options) {
			if (getApp().globalData.test) {
				Mock.mock(/content/, {
					title: '标题',
					body: '正文部分'
				});
				Mock.mock(/user/, {
					username: '作者名'
				});
			}
			
			// const event = this.getOpenerEventChannel()
			// //接收页面1传来的数据
			// event.on('id', (res) => {
			// 	this.contentsId = res
			// 	myRequest({
			// 		url: 'content/' + this.contentsId,
			// 		method: 'GET'
			// 	}).then((res) => {
			// 		if (res.statusCode == 200) {
			// 			this.content = res.data
			// 			console.log(res.data)
			// 		};
			// 	}).then(() => {
			// 		myRequest({
			// 			url:"user/"+this.content.author,
			// 			method:'GET'
			// 		}).then((res) => {
			// 			if(res.statusCode == 200){
			// 				this.detailUser.username = res.data.name
			// 				console.log(res.data)
			// 			};
			// 		});
			// 	});
			// })
			
			const contentsId = getApp().globalData.currentContentId
			myRequest({
				url: 'content/' + contentsId,
				method: 'GET'
			}).then((res) => {
				if (res.statusCode == 200) {
					this.content = res.data
					console.log(res.data)
				};
			}).then(() => {
				myRequest({
					url:"user/"+this.content.author,
					method:'GET'
				}).then((res) => {
					if(res.statusCode == 200){
						this.detailUser.username = res.data.name
						console.log(res.data)
					};
				});
			});
			
		},
		methods: {
			like(){
				if (this.liked) {
					this.likeCount--;
					this.liked = false;
				} else {
					this.likeCount++;
					this.liked = true;
				}
			},
			favorate(){
				if (this.favorited) {
					this.favoriteCount--;
					this.favorited = false;
				} else {
					this.favoriteCount++;
					this.favorited = true;
				}
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.main {
		width: 750rpx;
		box-sizing: border-box;
		padding-bottom: 150rpx;
	}

	.author-info {
		width: 750rpx;
		height: 100rpx;
		border-bottom: 1px solid lightgrey;
		padding-left: 60rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.author-name {
		font-weight: bold;
		font-size: 36rpx;
		margin-left: 40rpx;
	}

	.title {
		padding: 40rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.text {
		padding: 40rpx;
		font-size: 36rpx;
		box-sizing: border-box;
	}

	.bottom-panel {
		position: fixed;
		bottom: 0;

		width: 750rpx;
		height: 150rpx;
		box-sizing: border-box;
		padding-right: 40rpx;
		z-index: 5;
		background-color: white;
		border-top: 1px solid lightgrey;

		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.comment-input {
		border: 1px solid lightgrey;
		margin: 80rpx;
		border-radius: 6px;
		padding: 20rpx;
		width: 600rpx;
		background-color: #eee;
	}

	.bottom-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
	}

	.bottom-item__icon {
		width: 60rpx;
		height: 60rpx;
	}

	.bottom-item__text {
		color: #999;
		font-size: 20rpx;
	}

	.comments__head {
		width: 750rpx;
		border-top: 1px solid lightgrey;
		box-sizing: border-box;
		padding: 16rpx;
		font-weight: bold;
	}
</style>
